<template>
  <div>
    <el-container>
      <el-header>
        <div style="padding: 0">
          <el-menu style="width: 1200px;margin: 0 auto"
                   mode="horizontal"
                   @select="handleSelect"
                   text-color="black"
                   active-text-color="black">
            <a href=""><img src="logo.png" style="float: left;position: relative;width: 80px;"></a>
            <el-menu-item index="1" class="el-menu-item_top"><b>首页</b></el-menu-item>
            <el-menu-item class="el-menu-item_top">
              <el-submenu index="2" style="position:relative;top:3px;right: 5px">
                <template slot="title"><b>在售品种</b></template>
                <el-menu-item index="2-1"><a href="">在售猫咪</a></el-menu-item>
                <el-menu-item index="2-2"><a href="">在售狗狗</a></el-menu-item>
              </el-submenu>
            </el-menu-item>
            <el-menu-item class="el-menu-item_top">
              <el-submenu index="3" style="position:relative;top:3px;right: 5px">
                <template slot="title"><b>宠物词典</b></template>
                <el-menu-item index="3-1"><a href="">猫咪的饲养方式</a></el-menu-item>
                <el-menu-item index="3-2"><a href="">狗狗的饲养方式</a></el-menu-item>
              </el-submenu>
            </el-menu-item>
            <el-menu-item class="el-menu-item_top">
              <el-submenu index="4" style="position:relative;top:3px;right: 5px">
                <template slot="title"><b>服务项目</b></template>
                <el-menu-item index="4-1"><a href="">宠物美容</a></el-menu-item>
                <el-menu-item index="4-2"><a href="">宠物酒店</a></el-menu-item>
                <el-menu-item index="4-3"><a href="">猫咖啡馆</a></el-menu-item>
                <el-menu-item index="4-4"><a href="">狗狗公园</a></el-menu-item>
              </el-submenu>
            </el-menu-item>
            <el-menu-item index="5" class="el-menu-item_top"><b>联系我们</b></el-menu-item>
            <el-menu-item index="6" style="float: right;position: relative"><i class="el-icon-user" style="font-size: 30px"></i></el-menu-item>
            <div style="float: right;position: relative;top: 10px">
              <el-input type="text">
                <el-button slot="append" icon="el-icon-search"></el-button>
              </el-input>
            </div>
          </el-menu>
        </div>
      </el-header>

      <el-main style="overflow: hidden;">
        <h1 style="color: #64c9e1;font-size: 42px;
                text-align: center;padding: 1em;">{{cats.name}}
          <small style="color: #9A9A9A;font-weight: 300;
                 line-height: 1.5;font-size: 60%;">No.{{cats.id}}</small>
        </h1>

        <div>
          <div style="margin: 0 auto;overflow: hidden;width: 1170px;height: 480px">
            <div style="float: left;">
              <img style="max-width:100%;border-radius: 6px;" height="450" width="450"
                   :src="img.img1"
                   alt="">

            </div>
            <div style="padding-left:30px;width:682px;height:348px;float: left">
              <table class="table1">
                <tr class="bc">
                  <th style="border-top-left-radius:6px;" class="th1">状态</th>
                  <td style="border-top-right-radius: 6px" class="td1">{{cats.zt}}</td>
                </tr>
                <tr>
                  <th class="th1">查询号码</th>
                  <td class="td1">{{cats.id}}</td>
                </tr>
                <tr class="bc">
                  <th class="th1">性别</th>
                  <td class="td1">{{cats.sex}}</td>
                </tr>
                <tr>
                  <th class="th1">生日</th>
                  <td class="td1">{{cats.birth}}</td>
                </tr>
                <tr class="bc">
                  <th class="th1">毛色</th>
                  <td class="td1">{{cats.color}}</td>
                </tr>
                <tr>
                  <th class="th1">出生地</th>
                  <td class="td1">{{cats.csd}}</td>
                </tr>
                <tr class="bc">
                  <th class="th1">疫苗接种</th>
                  <td class="td1">已接种({{cats.ym}}次)</td>
                </tr>
                <tr>
                  <th class="th1">血统书</th>
                  <td class="td1">{{cats.xts}}</td>
                </tr>
                <tr class="bc" style="font-size: 17px">
                  <th style="border-bottom-left-radius:6px;" class="th1">宠物价格</th>
                  <td style="border-bottom-right-radius:6px;" class="td1">{{cats.money}}元</td>
                </tr>
              </table>
            </div>
          </div>
        </div>

        <div style="margin: 0 auto;width: 1170px;height: 145px">
          <h5 style="width:100%;color: #a56437;font-size: 18px;margin-bottom: 15px">特征
            <small style="color: #9A9A9A;font-weight: 300;
                 line-height: 1.5;font-size: 75%;">Features</small>
          </h5>
          <div style="color: #a56437;padding: 1em;margin: 10px;border-radius: 6px;background-color: #f1d8b6">
            <p style="line-height: 1.5;margin: 0 0 10px;">体重：{{cats.weight}}kg( 体重测试日：{{cats.weightday}})</p>
            <p style="line-height: 1.5;margin: 0 0 10px;">{{cats.tz}}</p>
          </div>
        </div>

        <hr style="width:1200px;margin-top: 50px;
            margin-bottom: 40px;border: 0;border-top: 1px solid #9A9A9A;">

        <div style="margin: 0 auto;width: 1170px;height: 370px">
          <img style="border-radius: 6px" :src="img.img2" height="360" width="360" alt="">
          <img style="margin-left:20px;border-radius: 6px" :src="img.img3" height="360" width="360" alt="">
          <img style="margin-left:20px;border-radius: 6px" :src="img.img4" height="360" width="360" alt="">
        </div>

        <hr style="width:1200px;margin-top: 50px;
            margin-bottom: 40px;border: 0;border-top: 1px solid #9A9A9A;">

        <div style="text-align: center;color: #a56437;">
          <p>如果要寻找其他品种的猫猫，请联系我们的店员。</p>
        </div>

        <div style="text-align: center;padding-top: 30px">
          <el-button @click="back()" style="border-color: #f5b2b2;background-color: #f5b2b2;" type="primary" icon="el-icon-back">
            Back
          </el-button>
        </div>


      </el-main>

    </el-container>
  </div>
</template>

<script>
export default {
  data() {
    return {
      img: {
        img1: '217-1.jpg',
        img2: '217-2.jpg',
        img3: '217-3.jpg',
        img4: '217-4.jpg',
      },
      cats: {
        id:'01',
        name:'英国短毛猫',
        zt:'受理中',
        sex:'男孩',
        birth:'2022/02/23',
        color:'金色',
        csd:'武汉',
        ym:'2',
        xts:'有',
        money:'300',
        weight:'2.1',
        weightday:'2022/08/12',
        tz:'活泼可爱'

      },
    }
  },

  methods: {
    back(){
      location.href="/searchcat.html";
    },
    handleSelect1(key,keyPath){
      v.currentIndex=key

    },
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    }
  },
  created:function () {
    axios.get("select"+location.search).then(function (response) {
      v.cats = response.data;
    })
  }
}
</script>



<style>
.th1 {
  border-bottom: 1px solid #f1d8b6;
  text-align: left;
}

.td1 {
  padding: 0.6em 1em;
  border-bottom: 1px solid #f1d8b6;
  border-left: 1px solid #f1d8b6;
}

.table1 {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 6px;
  border: none;
  border: 2px solid #f1d8b6;
  font-weight: bold;
  color: #a56437;
  font-size: 14px;
}

.bc {
  background-color: #e6f8f4;
}

.fa-arrow-left:before {
  content: "\f060";
}
</style>

